<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link
      rel="stylesheet"
      type="text/css"
      href="./Cesium/Widgets/widgets.css"
    />
    <script type="text/javascript" src="./cesium/Cesium.js"></script>

    <style>
      body {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="cesiumcontainer" style="width: 100vw; height: 100vh"></div>

    <script>
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2ZTgxOGNhZC03NThmLTQ0NzMtOTNlYS1kNmM3YzlmZDU3NTMiLCJpZCI6MTI1NTY3LCJpYXQiOjE2NzY5MDI0MzJ9.ulIEz3NCh2cMEBiHrqIuv9I6icn5KTMMnBdy2wassoM";

      const czml = [
        {
          id: "document",
          name: "CZML Path",
          version: "1.0",
          clock: {
            interval: "2012-08-04T10:00:00Z/2012-08-04T15:00:00Z",
            currentTime: "2012-08-04T10:00:00Z",
            multiplier: 10,
          },
        },
        {
          id: "path",
          name: "path with GPS flight data",
          description:
            "<p>Hang gliding flight log data from Daniel H. Friedman.<br>Icon created by Larisa Skosyrska from the Noun Project</p>",
          availability: "2012-08-04T10:00:00Z/2012-08-04T15:00:00Z",
          path: {
            material: {
              polylineOutline: {
                color: {
                  rgba: [255, 0, 255, 255],
                },
                outlineColor: {
                  rgba: [0, 255, 255, 255],
                },
                outlineWidth: 5,
              },
            },
            width: 0,
            leadTime: 10,
            trailTime: 1000,
            resolution: 5,
          },
          billboard: {
            image:
              "",
            scale: 0,
            eyeOffset: {
              cartesian: [0.0, 0.0, -10.0],
            },
          },
          position: {
            epoch: "2012-08-04T10:00:00Z",
            cartographicDegrees: [
              0, 114.12614489514146, 22.502357140040846, 200, 10,
              114.12866368135279, 22.49995682140087, 200, 20, 114.1314382039714,
              22.49799356245189, 200, 30, 114.13342192435925,
              22.496288921645434, 200, 40, 114.13457463804681,
              22.49526881704924, 200, 50, 114.13867079627924,
              22.491717977339956, 200, 60, 114.14163998004243,
              22.48952790232907, 200, 70, 114.14465964705192,
              22.488513909835657, 200, 80, 114.14785392043598,
              22.48800314133854, 200, 90, 114.15279650270597,
              22.485623057835074, 200, 100, 114.15380028166935,
              22.483171921338467, 200, 110, 114.15341374554856,
              22.481413374567314, 200, 120, 114.15353827580718,
              22.479662106513416, 200,
            ],
          },
        },
      ];

      let viewer = new Cesium.Viewer("cesiumcontainer", {
        terrain: Cesium.Terrain.fromWorldTerrain(),
        baseLayerPicker: false,
        shouldAnimate: true,
      });

      viewer.dataSources
        .add(Cesium.CzmlDataSource.load(czml))
        .then((dataSource) => {
          viewer.trackedEntity = dataSource.entities.getById("path");
        });
    </script>
  </body>
</html>
